<template>
	<view class="page page-index u-skeleton">

		<!-- 轮播区 -->
		<view class="swiper-box u-skeleton-rect">
			<u-swiper @click="topBannerClick" :list="topBanners" height="350" border-radius="0"></u-swiper>
		</view>

		<!-- 金刚区 -->
		<template v-if="navSwitch != 0">
			<view class="district u-skeleton-rect">
				<view class="district-list" @click="openInfo('2')">
					<image src="../../static/index/xinpinFB.png" />
					<view>新品发布</view>
				</view>
				<view class="district-list" @click="openInfo('4')">
					<image src="../../static/index/xinpinYS.png" />
					<view>新品预售</view>
				</view>
				<view class="district-list" @click="openInfo('5')">
					<image src="../../static/index/fabuLS.png" />
					<view>发布历史</view>
				</view>
				<view class="district-list" @click="openInfo('3')">
					<image src="../../static/index/shopp.png" />
					<view>玉石商店</view>
				</view>
			</view>
		</template>
		<!-- 中奖播报 -->
		<!-- <view class="winning-swiper u-skeleton-rect">
			<swiper :indicator-dots="false" :circular="true" :style="{height: '120rpx'}" :autoplay="true"
				:interval="3000" :duration="1000" :vertical="true">
				<template v-for="(item, i) in winningList">
					<swiper-item :key="i">
						<view class="swiper-item flex-rc">
							<image :src="item.user_avatarUrl" class="cover"></image>
							<view class="text-info">
								<view class="congratulation">恭喜{{item.user_nickName}}获得了</view>
								<view class="goods-name one-line bold">{{item.product_name}}</view>
							</view>
						</view>
					</swiper-item>
				</template>
			</swiper>
		</view> -->

		<!-- 推荐位 -->
		<template v-if="exclusiveList.length>0">
			<view class="recommend-list">
				<view class="recommend-title">
					<view class="new-people">
						<view>限量发售</view>
					</view>
					<view class="new-more" @click="openInfo('1')">
						<view>MORE</view>
						<u-image src="/static/index/more.png" width="26" height="14" style="margin-top: -6rpx; margin-left: 10rpx;"></u-image>
					</view>
				</view>
				<view class="list-flex">
					<template v-for="(item, index) in exclusiveList">
						<view :key="index" class="item"  @click="toDetails(item.id)">
							<u-image :src="item.image" width="208" height="208" border-radius="16"></u-image>
							<view class="item-name">{{item.name}}</view>
							<view class="price">
								<text class="unit">¥</text>
								<text class="money">{{item.price}}</text>
							</view>
						</view>
					</template>
				</view>
			</view>
		</template>

		<template v-if="dayList.length > 0">
			<view class="recommend-list u-skeleton-rect" style="margin-bottom: 0;">
				<view class="recommend-title">
					<view class="new-people">
						<view>每日更新</view>
					</view>
					<view class="new-more" @click="viewPage('/pages/category/today')">
						<view>MORE</view>
						<u-image src="/static/index/more.png" width="26" height="14" style="margin-top: -6rpx; margin-left: 10rpx;"></u-image>
					</view>
				</view>
				<scroll-view scroll-x="true">
					<view class="list-flex">
						<template v-for="(item, index) in dayList">
							<view @click="viewPage('/pages/category/today')" :key="index" class="item">
								<u-image :src="item.image" width="208" height="208" border-radius="16"></u-image>
								<view class="item-name">{{item.name}}</view>
								<view class="price">
									<text class="unit">¥</text>
									<text class="money">{{item.price}}</text>
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</template>
		<!-- 新人进群领卡片 -->
		<!-- <view class="group-card" v-if="groupShow">
			<view class="card-left">
				<u-image src="/static/index/new-card.png" width="122" height="80"></u-image>
				<view>新人进群领卡片</view>
			</view>
			<view class="card-right" @click="viewInfo">立即参与</view>
			<image src="/static/index/card-close.png" class="close-icon" @click="groupShow = false"></image>
		</view> -->

		<!-- 本周推荐 -->
		<template v-if="newList[1].status == 1">
			<view class="week-recommend-box u-skeleton-rect">
				<view class="header">
					<text class="title">本周推荐</text>
					<view @click="viewPage('/pages/category/week')" class="more">
						<view>MORE</view>
						<u-image src="/static/index/more1.png" width="26" height="14" style="margin-top: -6rpx; margin-left: 10rpx;"></u-image>
					</view>
				</view>
				<image src="/static/index/week-icon.png" class="week-icon"></image>

				<scroll-view class="custom-scroll-view" :scroll-x="true">
					<view class="list" :style="'width: ' + recommendWidth + 'rpx;'">
						<template v-for="(goods, g) in recommendList">
							<view @click="viewDetail(goods.id)" class="item" :key="g">
								<u-image :src="goods.image" width="256" height="256" border-radius="16" mode="widthFix">
								</u-image>
								<view class="info-box">
									<view class="name">{{goods.name}}</view>
									<view class="price">
										<text class="unit">¥ </text>
										<text class="money">{{goods.price}}</text>
									</view>
								</view>
							</view>
						</template>
					</view>

				</scroll-view>
			</view>
		</template>

		<!-- 轮播图 -->
		<div v-if="centerBanners.length>0" class="banner-box u-skeleton-rect">
			<u-swiper @click="centerBannerClick" :list="centerBanners" height="196" border-radius="16" mode="none">
			</u-swiper>
		</div>

		<!-- 手办专区 -->
		<template  v-if="newList[2].status == 1">
			<view class="hand-area u-skeleton-rect" v-if="handList.length > 0">
				<view class="hand-title">
					<view class="hand-left bold">
						<u-image src="/static/index/icon-hand.png" width="40" height="40"></u-image>
						<view>手办专区</view>
					</view>
					<view @click="viewPage('/pages/category/hand-list')" class="more">
						<view>MORE</view>
						<u-image src="/static/index/more.png" width="26" height="14" style="margin-top: -6rpx; margin-left: 10rpx;"></u-image>
					</view>
				</view>
				<view class="hand-list">
					<u-image :src="handList[0].image" width="328" height="328" border-radius="16"></u-image>
					<view>
						<template v-for="(item, index) in handList">
							<view class="hand-right" @click="viewPage('/pages/category/hand-list')" :key="index">
								<u-image :src="item.image" width="96" height="96" border-radius="6"></u-image>
								<view class="hand-item">
									<view class="item">{{item.name}}</view>
									<view class="hand-price">￥<text>{{item.price}}</text></view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</template>

		<!-- 商品分类 -->
		<view class="category-box" v-if="cateList.length>0">
			<view class="header">
				<u-tabs :list="tabList" :height="68" active-color="#DFC791" inactive-color="#FFFFFF" bg-color="none"
					bar-width="48" :bar-style="barStyle" bar-height="8" item-width="25%" :is-scroll="true"
					:current="current" @change="tabSelected" class="custom-tabs"></u-tabs>
			</view>

			<view v-if="cateList.length>0" class="list u-skeleton-rect">
				<template v-for="(goods, g) in cateList">
					<view @click="viewDetail(goods.id)" class="item" :key="g">
						<view class="cover-box">
							<u-image :src="goods.image" width="320" height="320" border-radius="16">
							</u-image>
							<image src="@/static/index/icon-new.png" class="tag" v-if="goods.tag_init == 4"></image>
							<view v-if="config.people_number_switch==1" class="quantity">{{goods.order_count}}人已开购
							</view>
						</view>

						<view class="info-box">
							<view class="name">{{goods.name}}</view>
							<view class="tips">
								<view class="declare">
									{{goods.remark}}
								</view>
								<view class="">
									共{{goods.products_count}}款藏品
								</view>
							</view>
							<view class="price">
								<text class="unit">¥ </text>
								<text class="money">{{goods.price}}</text>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view v-else class="empty-box">
				<u-empty mode="list"></u-empty>
			</view>
		</view>

		<!-- 赠送礼品 首页弹窗--> 
		<u-mask :show="showGift && poster.state == 1">
			<view class="gift-box flex-ccc">
				<image @click="viewPoster()" :src="poster.image" mode="widthFix" class="gift"></image>

				<view class="btn-close">
					<u-icon @click="showGift = false" name="close-circle" color="#FFF" size="64"></u-icon>
				</view>
			</view>
		</u-mask>
		 <!-- 提示信息 -->
		<u-toast ref="uToast" />

		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"

	export default {
		data() {
			return {
				// banner
				topBanners: [],
				centerBanners: [],
				poster: {},
				// 中奖播报
				winningList: [],
				// 盲盒列表
				exclusiveList: [],
				dayList: [],
				recommendList: [],
				cateList: [],
				old: {
					scrollTop: 0
				},

				queryParams: {
					pid: 0,
					page: 1,
					limit: 100,
					where: {
						name: ''
					}
				},

				current: 0,
				barStyle: {
					background: '#DFC791'	//选项卡底部bar颜色
				},
				tabList: [],
				tabParams: {
					where: {},
					page: 1,
					limit: 10,
				},
				newList: '',
				showGift: true,

				
				navSwitch: true, //金刚区开关
				handList: '', //手办列表
				
				groupShow: true,
				loading: true,
				changeStatus: true,
			}
		},
		computed: {
			...mapGetters(['userInfo', 'tabbar', 'config']),
			recommendWidth() {
				return this.recommendList.length * 276 + 10
			},
			shareParams() {
				let name = this.userInfo.nickName || ''
				let title = name.slice(0, 10) + '邀请您参与拆盲盒活动'
				let path = '/pages/index/index?share_user=' + (this.userInfo.id || '')
				let img = this.config.box_share == '' ? "" : this.config.box_share
				return {
					title: title,
					path: path,
					imageUrl: img
				}
			},
		},
		onLoad(query) {
			if (query.share_user) {
				this.shareInfo(query.share_user)
				uni.setStorageSync('share_user', query.share_user)
			}
			let options = {}
			if (query.scene) {
				let scene = decodeURIComponent(query.scene)
				// let scene = 'prize_id=70&activeUser_id=44'
				scene = scene.split('&')
				
				scene.forEach(item => {
					// 
					let kv = item.split('-')
					// 
					options[kv[0]] = parseInt(kv[1])
				})
				let dealer_id = options.dealer_id
				
				this.$net.req('/dealer/share', {dealer_id}, false).then()
			}


		},
		onShow() {
			this.getMine()
			this.getFirstScreen()
			this.getList()
			this.getTabList(true)
		},
		onReachBottom() {
			this.getTabList()
		},
		onShareAppMessage() {
			return this.shareParams
		},
		methods: {
			...mapActions(['setUser']),
			openInfo(type){ //分类按钮  1 新人专享 2 新品发布 3 玉石商城 4 新品预告 5 历史发布
				if(type!=4){
					uni.navigateTo({
						url:'/pages/newPage/homeList?type='+type
					})
				}else{
					uni.navigateTo({
						url:'/pages/newPage/newLst?type='+type
					})
				}
			},
			toDetails(ids){
				uni.navigateTo({
					url:'/pages/newPage/shoopDetails?id='+ids
				})
			},
			
			viewInfo(){//立即参与
				this.router('/pages/index/group-url')
			},
			viewPoster() {//赠送礼品
				if (!this.poster.link) return

				let url = !this.poster.content ? this.poster.link :
					`${this.poster.link}?blind_box_id=${this.poster.content.box_id}`
				this.router(url)

			},
			shareInfo(parent_user_id) { // 邀请新用户
				this.$net.req('/user/fans', {parent_user_id}, false).then(res => {})
			},
			topBannerClick(index) { //轮播图
				const item = this.topBanners[index]
				const {link} = item
				if (item.content) {
					uni.navigateTo({
						url: link + '?blind_box_id=' + item.content.box_id,
					})
				} else {
					this.viewPage(link)
				}
			},
			centerBannerClick(index) { //轮播区
				const item = this.centerBanners[index]
				const {
					link
				} = item
				if (item.content) {
					uni.navigateTo({
						url: link + '?blind_box_id=' + item.content.box_id,
					})
				} else {
					this.viewPage(link)
				}

			},

			viewPage(url) { //跳转列表
				if (!!url) {
					if (this.tabbar.indexOf(url) > -1) {
						uni.switchTab({
							url
						})
					} else {
						uni.navigateTo({
							url
						})
					}
				}
			},

			tabSelected(index) {//商品分类
				if (this.current !== index) {
					this.current = index
					const {where} = this.tabList[index]
					this.tabParams.where = where
					this.tabParams.page = 1
					this.getTabList()
				}

			},
			viewDetail(id) { //本周推荐
				uni.navigateTo({
					url: `/pages/box/detail?blind_box_id=${id}`
				})
			},
			
			getMine() {// 更新用户缓存信息
				this.$net.req('/user/getMine', {}, false).then(res => {
					if (res.code === 200) {
						this.setUser(res.data)
						this.getBanners()
						this.getTabs()
						this.getConfig()
						setTimeout(() => {
							this.loading = false
						}, 500)
					}
				})
			},
			getFirstScreen() {
				this.$net.req('/blind_box/getHeadTags', {}, false).then(res => {
					if (res.code == 200) {
						this.newList = res.data
					}
				})
				this.$net.req('/broadcast', {}, false).then(res => {
					if (res.code == 200) {
						this.winningList = res.data
					}
				})
			},
			
			getBanners() { //调用信息
				this.$net.req('/ad', {type: 1}, false).then(res => {
					if (res.code === 200) {
						this.topBanners = res.data
					}
				})

				this.$net.req('/ad', {type: 2}, false).then(res => {
					if (res.code === 200) {
						this.centerBanners = res.data
					}
				})
				this.$net.req('/ad', {type: 3}, false).then(res => {
					if (res.code === 200) {
						this.poster = res.data[0]
					}
				})
			},
			getList() {
				// 新人专享
				this.$net.req('/product/getLists', {where: {scene: 1},page: 1,limit: 3}, false).then(res => {
					if (res.code === 200) {
						this.exclusiveList = res.data.list
					}
				})
				// 每日更新
				this.$net.req('/BlindBox/getLists', {where: {init: 2},page: 1,limit: this.userInfo.is_new_people === 1 ? 2 : 4}, false).then(res => {
					if (res.code === 200) {
						this.dayList = res.data.list
					}
				})
				// 每周推荐
				this.$net.req('/BlindBox/getLists', {where: {init: 3},page: 1,limit: 10}, false).then(res => {
					if (res.code === 200) {
						this.recommendList = res.data.list
					}
				})
				this.$net.req('/BlindBox/getLists', {where: {init: 7}, page: 1, limit: 3}, false).then(res => {
					if (res.code == 200) {
						this.handList = res.data.list
					}
				})
				
			},
			getTabs() {
				this.$net.req('/BlindBox/getTags', {}, false).then(res => {
					if (res.code === 200) {
						let tabs = [
							{
								name: '盲盒',
								where: {}
							}
						]

						let list = res.data.map(item => {
							const {name,init} = item
							return {
								name,
								where: {
									init: init
								}
							}
						})
						this.tabList = tabs.concat(list)
						this.getTabList()
					}
				})
			},
			getTabList(flush = false) {
				let params = this.tabParams
				if (flush) {
					let totalPage = this.tabParams.page > 1 ? this.tabParams.page - 1 : this.tabParams.page
					params.limit = totalPage * this.tabParams.limit
					params.page = 1
				}
				if ( this.changeStatus ) {
					 this.changeStatus = false
					 this.$net.req('/BlindBox/getLists', params, false).then(res => {
					 	if (res.code === 200) {
							
							setTimeout(()=>{
								this.changeStatus = true
							},500)
					 
					 		if (flush) {
					 			this.cateList = res.data.list
					 			return
					 		}
					 
					 		if (this.tabParams.page === 1) {
					 			this.cateList = res.data.list
					 		} else if (res.data.list.length > 0) {
					 			this.cateList = this.cateList.concat(res.data.list)
					 		}
					 
					 		if (res.data.list.length > 0) {
					 			++this.tabParams.page
					 		}
					 	}
					 })
				}
			},
			
			// 获取配置信息
			getConfig() {
				this.$net.req('/config/getBatchByKeys', {keys: ['applet_name','home_navigation_switch']}, false).then(res => {
					if (res.code == 200) {
						this.navSwitch = res.data.home_navigation_switch
						uni.setNavigationBarTitle({
							title: res.data.applet_name || ''
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-index {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;
		background-color: #292C2D;

		.swiper-box {
			width: 100%;
			height: 350rpx;
			background-color: #292C2D;
		}

		.district {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 36rpx;
			margin-top: 32rpx;

			.district-list {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 48px;
					height: 48px;
				}

				view{
					margin-top: 4rpx;
					font-size: 24rpx;
					font-family: HarmonyOS_Sans_SC;
					color: #6A6976;
				}
			}
		}
		.winning-swiper {
			width: 702rpx;
			height: 120rpx;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
			background: url(../../static/index/bg-winning-notice.png) no-repeat 0 0 transparent;
			background-size: 702rpx 120rpx;
			
			
			.swiper-item {
				height: 120rpx;
				padding: 20rpx;
				
				.cover {
					width: 80rpx;
					height: 80rpx;
					border-radius: 12rpx;
				}
				
				.text-info {
					width: 562rpx;
					padding-left: 20rpx;
					
					.congratulation {
						height: 32rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						color: #000000;
						
					}
					
					.goods-name {
						height: 32rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						color: #2F2E3B;
						margin-top: 4rpx;
					}
				}
			}
		}
		// 新人专享
		.recommend-list {
			margin-top: 20rpx;
			width: 702rpx;
			height: 418rpx;
			background: #17161D;
			border-radius: 12rpx;
			padding: 24rpx 20rpx 20rpx;
			margin-bottom: 20rpx;

			.recommend-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.new-people {
					width: 128rpx;
					height: 40rpx;
					font-size: 32rpx;
					font-family: HarmonyOS_Sans_SC_Bold;
					color: #FFFFFF;
					position: relative;
					font-weight: bold;
					view:nth-child(1){
						position: relative;
						z-index: 2;
					}

					.icon-new {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 64rpx;
						height: 22rpx;
					}
				}

				.new-more {
					font-size: 24rpx;
					font-family: HarmonyOS_Sans_SC;
					color: #6A6976;
					display: flex;
				}
			}

			.list-flex {
				display: flex;

				.item {
					width: 208rpx;
					height: 310rpx;
					border-radius: 16rpx;
					margin-right: 20rpx;

					.item-name {
						margin: 16rpx 16rpx 0;
						font-size: 28rpx;
						font-family: HarmonyOS_Sans_SC;
						color: #FFFFFF;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.price {
						font-size: 28rpx;
						font-weight: bold;
						color: #DFC791;
						padding: 10rpx 16rpx 0;

						.unit {
							font-size: 16rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
		}

		.group-card {
			width: 702rpx;
			height: 104rpx;
			margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			border: 2rpx solid #2F2E3B;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18rpx;
			padding-right: 32rpx;
			position: relative;

			.card-left {
				display: flex;
				align-items: center;

				view:nth-child(2) {
					margin-left: 20rpx;
					font-size: 32rpx;
					font-family: HarmonyOS_Sans_SC_Bold;
					color: #2F2E3B;
					font-weight: bold;
				}
			}

			.card-right {
				width: 136rpx;
				height: 48rpx;
				background: #2F2E3B;
				border-radius: 24rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 24rpx;
				font-family: HarmonyOS_Sans_SC_Medium;
				color: #FFFFFF;
			}
			
			.close-icon{
				position: absolute;
				right: 0;
				top: 0;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.week-recommend-box {
			width: 702rpx;
			// background: url(../../static/index/bg-week-recommend.png) no-repeat 0 0 #7E65FF;
			// background-size: 702rpx 502rpx;
			background: #2F2E3B;
			height: 502rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-top: 30rpx;
			position: relative;

			.header {
				display: flex;
				justify-content: space-between;
				height: 104rpx;
				padding: 32rpx 20rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 40rpx;
				}

				.more {
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					display: flex;
					position: relative;
					z-index: 2;
					margin-top: -10rpx;
				}
			}
			
			.week-icon{
				width: 350rpx;
				height: 68rpx;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
			}

			.custom-scroll-view {
				.list {
					display: flex;
					justify-content: left;
					padding: 0 20rpx 20rpx;
					// 本周推荐
					.item {
						width: 256rpx;
						height: 378rpx;
						background: #292C2D;
						border-radius: 16rpx;
						margin-right: 20rpx;

						&:last-child {
							margin-right: 0;
						}
						// 本周推荐
						.info-box {
							padding: 18rpx 16rpx 16rpx;

							.name {
								height: 40rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								line-height: 40rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.price {
								height: 40rpx;
								font-size: 32rpx;
								font-weight: bold;
								color: #DFC791;
								line-height: 40rpx;
								margin-top: 8rpx;

								.unit {
									font-size: 24rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}
			}

		}

		.banner-box {
			width: 702rpx;
			height: 196rpx;
			margin-top: 30rpx;
		}

		// 手办专区
		.hand-area {
			width: 702rpx;
			height: 464rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 32rpx 20rpx;
			margin-top: 32rpx;

			.hand-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				font-family: HarmonyOS_Sans_SC;
				color: #333333;
				margin-bottom: 32rpx;

				.hand-left {
					font-size: 28rpx;
					font-family: HarmonyOS_Sans_SC_Bold;
					color: #333333;
					display: flex;
					padding: 8rpx;
					padding-right: 16rpx;
					border-radius: 8rpx;
					border: 2rpx solid #6A6976;
					view:nth-child(2){
						margin-left: 10rpx;
					}
				}
				.more{
					font-size: 24rpx;
					color: #6A6976;
					line-height: 40rpx;
					display: flex;
				}
			}

			.hand-list {
				display: flex;
				justify-content: space-between;

				.hand-right {
					width: 302rpx;
					height: 96rpx;
					margin-bottom: 20rpx;
					display: flex;

					&:nth-child(3) {
						margin-bottom: 0;
					}

					.hand-item {
						position: relative;
						margin-left: 16rpx;

						.item {
							font-size: 20rpx;
							font-family: HarmonyOS_Sans_SC;
							color: #2E2B2B;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}

					.hand-price {
						position: absolute;
						bottom: 2rpx;
						left: 0;
						font-size: 16rpx;
						font-family: HarmonyOS_Sans_SC_Medium;
						color: #DFC791;
						font-weight: bold;

						text {
							font-size: 24rpx;
						}
					}

				}
			}
		}

		.category-box {
			width: 702rpx;
			background: #17161d;
			border-radius: 12rpx;
			margin-top: 30rpx;
			padding: 18rpx 20rpx 32rpx;

			.header {
				width: 100%;

				&.search-result {
					line-height: 80rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 32rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.item {
					text-align: center;
					line-height: 80rpx;
					margin-right: 32rpx;

					.text {
						font-size: 32rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #101010;
					}

					&.active {


						.text {
							display: inline-block;
							color: #FF4023;
							font-weight: 600;
							border-bottom: 4rpx solid #FF4023;
						}
					}




				}
			}

			.list {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.item {
					width: 320rpx;
					height: 524rpx;
					background: #272727;
					border-radius: 20rpx;
					//底部块
					.info-box {
						padding: 20rpx;
						.name {
							height: 52rpx;
							font-size: 30rpx;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 36rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.tips {
							display: flex;
							flex-direction: row;
							height: 32rpx;
							font-size: 24rpx;
							color: #C3C2C1;
							line-height: 32rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							// margin-top: 10rpx;
							.declare{
								display: flex;
								align-items: center;
								background: #EFBF62;
								border-radius: 2rpx;
								color: #FFFFFF;
								padding: 5rpx;
								margin-right: 5rpx;
							}
						}

						.price {
							height: 40rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #DFC791;
							line-height: 40rpx;
							margin-top: 10rpx;

							.unit {
								font-size: 24rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
			.cover-box{
				position: relative;
				.tag{
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					width: 92rpx;
					height: 48rpx;
				}
				.quantity{
					position: absolute;
					bottom: 0;
					left: 0;
					width: 320rpx;
					height: 56rpx;
					background: rgba($color: #000000, $alpha: 0.6);
					border-radius: 0px 0px 16rpx 16rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 56rpx;
				}
				
			}

			.empty-box {
				min-height: 60vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		.gift-box {
			width: 100%;
			height: 100vh;
			
			.gift {
				width: 530rpx;
				position: relative;
			}
			
			.btn-close {
				margin-top: 54rpx;
			}
		}

	}
</style>
